<template>
  <div>
    <!-- this is honor page! -->

    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/manager' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>消息管理</el-breadcrumb-item>
        <el-breadcrumb-item>人员管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-tabs style="margin-top: 10px;" v-model="activePerson" @tab-click="handleClick">
      <el-tab-pane label="学生" name="student">
        <el-card shadow="always" :body-style="{ padding: '20px' }">

          <!-- 增加一个优秀学生 -->

          <el-table :data="goodStudentList">
            <el-table-column
              label="创建时间"
              prop="create_time"
              align="center"
              width="120">
            </el-table-column>
            <el-table-column
              label="更新时间"
              prop="update_time"
              align="center"
              width="120">
            </el-table-column>
            <el-table-column
              label="学号"
              prop="student_num"
              align="center"
              width="">
            </el-table-column>
            <el-table-column
              label="姓名"
              prop="name"
              align="center"
              width="">
            </el-table-column>
            <el-table-column
              label="详细信息"
              align="center"
              width="">
              <template slot-scope="scope">
                <el-popover
                  placement="top"
                  width="280"
                  trigger="click"
                  content="">
                  <el-button size="small" slot="reference">点击查看详情</el-button>
                  <p>姓名: {{ scope.row.name }} </p>
                  <p>性别: {{ scope.row.sex }} </p>
                  <p>生日: {{ scope.row.birthday }} </p>
                  <p>民族: {{ scope.row.nationality }} </p>
                  <p>籍贯: {{ scope.row.native_place }} </p>
                  <p>政治面貌: {{ scope.row.political_status }} </p>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="">
              <template slot-scope="scope">
                <el-button type="school" style="margin-bottom: 10px;" size="small" @click="addGoodPerson(scope.row.id)">设为优秀学生</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页导航 -->
          <el-pagination
            background
            style="float: right; padding: 10px 0;"
            @current-change="handleCurrentChange"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="studentNum">
          </el-pagination>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="教师" name="teacher">
        <el-card shadow="always" :body-style="{ padding: '20px' }">

          <!-- 增加一个金牌教师 -->

          <el-table :data="goodTeacherList">
            <el-table-column
              label="创建时间"
              prop="create_time"
              align="center"
              width="120">
            </el-table-column>
            <el-table-column
              label="更新时间"
              prop="update_time"
              align="center"
              width="120">
            </el-table-column>
            <el-table-column
              label="工号"
              prop="teacher_num"
              align="center"
              width="">
            </el-table-column>
            <el-table-column
              label="姓名"
              prop="name"
              align="center"
              width="">
            </el-table-column>
            <el-table-column
              label="详细信息"
              align="center"
              width="">
              <template slot-scope="scope">
                <el-popover
                  placement="top"
                  width="300"
                  trigger="click"
                  content="">
                  <el-button size="small" slot="reference">点击查看详情</el-button>
                  <p>姓名: {{ scope.row.name }} </p>
                  <p>性别: {{ scope.row.sex }} </p>
                  <p>生日: {{ scope.row.birthday }} </p>
                  <p>民族: {{ scope.row.nationality }} </p>
                  <p>籍贯: {{ scope.row.native_place }} </p>
                  <p>政治面貌: {{ scope.row.political_status }} </p>
                  <p>学历: {{ scope.row.educational_background }} </p>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="">
              <template slot-scope="scope">
                <el-button type="school" style="margin-bottom: 10px;" size="small" @click="addGoodPerson(scope.row.id)">设为金牌教师</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页导航 -->
          <el-pagination
            background
            style="float: right; padding: 10px 0;"
            @current-change="handleCurrentChange"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="teacherNum">
          </el-pagination>
        </el-card>

      </el-tab-pane>
    </el-tabs>

    <!-- 新增一个优秀学生的表单 -->
    <el-dialog
      title="新增优秀学生"
      :visible.sync="addStudentDialog"
      width="50%"
      :before-close="handleClose">
      <span>

        <el-form :model="addPersonForm" ref="addStudentForm" :rules="addStudentRules" label-width="80px" :inline="false" size="small">
          <el-form-item label="学生介绍" prop="summary">
            <el-input v-model="addPersonForm.summary"></el-input>
          </el-form-item>
          <el-form-item label="学生详情" prop="detail">
            <el-input v-model="addPersonForm.detail"></el-input>
          </el-form-item>
          <el-form-item
            v-for="(honor, index) in addPersonForm.honorList"
            :label="'荣誉' + (index + 1)"
            :key="index"
            :prop="'honorList.' + index + '.value'"
            :rules="{
              required: true, message: '荣誉不能为空', trigger: 'blur'
            }"
          >
            <el-input v-model="honor.value"></el-input><el-button @click.prevent="removeHonor(honor)">删除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addGoodPersonSubmit()">提交</el-button>
            <el-button @click="addHonor()">新增荣誉</el-button>
            <el-button @click="addStudentDialog = false">取消</el-button>
          </el-form-item>
        </el-form>

      </span>
    </el-dialog>

    <!-- 新增一个金牌教师的表单 -->
    <el-dialog
      title="新增金牌教师"
      :visible.sync="addTeacherDialog"
      width="50%"
      :before-close="handleClose">
      <span>

        <el-form :model="addPersonForm" ref="addTeacherForm" :rules="addTeacherRules" label-width="80px" :inline="false" size="small">
          <el-form-item label="教师介绍" prop="summary">
            <el-input v-model="addPersonForm.summary"></el-input>
          </el-form-item>
          <el-form-item label="教师详情" prop="detail">
            <el-input v-model="addPersonForm.detail"></el-input>
          </el-form-item>
          <el-form-item
            v-for="(honor, index) in addPersonForm.honorList"
            :label="'荣誉' + (index + 1)"
            :key="index"
            :prop="'honorList.' + index + '.value'"
            :rules="{
              required: true, message: '荣誉不能为空', trigger: 'blur'
            }"
          >
            <el-input v-model="honor.value"></el-input><el-button @click.prevent="removeHonor(honor)">删除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addGoodPersonSubmit()">提交</el-button>
            <el-button @click="addHonor()">新增荣誉</el-button>
            <el-button @click="addTeacherDialog = false">取消</el-button>
          </el-form-item>
        </el-form>

      </span>
    </el-dialog>

  </div>
</template>

<script>
import { toDateString } from '@/utils/time.js'
export default {
  data () {
    return {
      addStudentRules: {
        summary: [
          { required: true, message: '请输入学生介绍', trigger: 'blur' }
        ],
        detail: [
          { required: true, message: '请输入学生详情', trigger: 'blur' }
        ]
      },
      addTeacherRules: {
        summary: [
          { required: true, message: '请输入教师介绍', trigger: 'blur' }
        ],
        detail: [
          { required: true, message: '请输入教师详情', trigger: 'blur' }
        ]
      },

      currentPage: 1,
      isStudent: true,
      goodStudentList: [],
      goodTeacherList: [],
      activePerson: 'student',
      studentNum: 0,
      teacherNum: 0,
      addPersonForm: {
        detail: "",
        summary: "",
        userId: '',
        honorList: [{
          value: ''
        }]
      },
      addStudentDialog: false,
      addTeacherDialog: false,
    }
  },
  created () {
    this.getGoodPersonList(true)
    this.getGoodPersonList(false)
  },
  methods: {
    async getGoodPersonList (status) {
      if (status) {
        this.goodStudentList = []
        const { data: res } = await this.$http.post(`user/admin/getUserList?page=${this.currentPage - 1}&rows=10&identity=2`)
        if (!res.state) return this.$message.error(res.msg)
        console.log(res)
        this.goodStudentList = this.foreachObj(res.detail.list)
        this.studentNum = res.detail.total
        // this.goodStudentList = []
        // this.$http.post(`board/all/getGoodTeacherOrStudentList?identity=2&page=${this.currentPage - 1}&rows=10`)
        //   .then(result => {
        //     const res = result.data
        //     if (!res.state) return this.$message.error(res.msg)
        //     let list = []
        //     list = this.foreachObj(res.detail.list)
        //     console.log(list)
        //     list.map(item => {
        //       this.$http.post(`board/all/selectGoodTeacherOrStudentById?id=${item.id}`)
        //         .then(resul => {
        //           const resp = resul.data
        //           console.log(resp)
        //           item.honorList = []
        //           resp.detail.honorList.forEach((honor, index) => {
        //             item.honorList.push({
        //               value: honor.honorContent
        //             })
        //           })
        //           item.userMessage = resp.detail.userMessage
        //           this.goodStudentList.push(item)
        //         })
        //     })
        //     this.studentNum = res.detail.total
        //   })
      }else {
        this.goodTeacherList = []
        const { data: res } = await this.$http.post(`user/admin/getUserList?page=${this.currentPage - 1}&rows=10&identity=3`)
        if (!res.state) return this.$message.error(res.msg)
        console.log(res)
        this.goodTeacherList = this.foreachObj(res.detail.list)
        this.teacherNum = res.detail.total
        // this.goodTeacherList = []
        // this.$http.post(`board/all/getGoodTeacherOrStudentList?identity=3&page=${this.currentPage - 1}&rows=10`)
        //   .then(result => {
        //     const res = result.data
        //     if (!res.state) return this.$message.error(res.msg)
        //     let list = []
        //     list = this.foreachObj(res.detail.list)
        //     console.log(list)
        //     list.map(item => {
        //       this.$http.post(`board/all/selectGoodTeacherOrStudentById?id=${item.id}`)
        //         .then(resul => {
        //           const resp = resul.data
        //           console.log(resp)
        //           item.honorList = []
        //           resp.detail.honorList.forEach((honor, index) => {
        //             item.honorList.push({
        //               value: honor.honorContent
        //             })
        //           })
        //           item.userMessage = resp.detail.userMessage
        //           this.goodTeacherList.push(item)
        //         })
        //     })
        //     this.teacherNum = res.detail.total
        //   })
      }
    },

    // 新增一个人
    addGoodPerson (id) {
      this.addPersonForm = {
        detail: "",
        summary: "",
        userId: id,
        honorList: [{
          value: ''
        }]
      };
      if (this.isStudent) {
        this.addStudentDialog = true
      }else {
        this.addTeacherDialog = true
      }
    },

    // 新增一个人提交按钮
    addGoodPersonSubmit () {
      // 判断是不是学生
      if (this.isStudent) {
        this.$refs.addStudentForm.validate(valid => {
          if (!valid) return
          // 将表单中的荣誉描述拆开, 拼接到url中
          let url = `board/admin/createGoodTeacherOrStudent?userId=${this.addPersonForm.userId}`
          this.addPersonForm.honorList.forEach(item => {
            url += '&honorList=' + item.value
          })
          delete this.addPersonForm.userId
          delete this.addPersonForm.honorList
          console.log(this.addPersonForm)
          this.$http({
            url: url,
            method: 'post',
            data: this.addPersonForm
          }).then(result => {
            const res = result.data
            console.log(res)
            if (!res.state) return this.$message.error(res.msg)
            this.addStudentDialog = false
            this.$message.success(res.msg)
            this.getGoodPersonList(this.isStudent)
          })
        })
      }else {
        // 处理教师那边的
        this.$refs.addTeacherForm.validate(valid => {
          if (!valid) return
          // 将表单中的荣誉描述拆开, 拼接到url中
          let url = `board/admin/createGoodTeacherOrStudent?userId=${this.addPersonForm.userId}`
          this.addPersonForm.honorList.forEach(item => {
            url += '&honorList=' + item.value
          })
          delete this.addPersonForm.userId
          delete this.addPersonForm.honorList
          console.log(this.addPersonForm)
          this.$http({
            url: url,
            method: 'post',
            data: this.addPersonForm
          }).then(result => {
            const res = result.data
            console.log(res)
            if (!res.state) return this.$message.error(res.msg)
            this.addTeacherDialog = false
            this.$message.success(res.msg)
            this.getGoodPersonList(this.isStudent)
          })
        })
      }
    },

    removeHonor(item) {
      if (this.isStudent) {
        var index = this.addPersonForm.honorList.indexOf(item)
        if (index !== 0) {
          this.addPersonForm.honorList.splice(index, 1)
        }
      }else {
        var index = this.addPersonForm.honorList.indexOf(item)
        if (index !== 0) {
          this.addPersonForm.honorList.splice(index, 1)
        }
      }
    },
    addHonor() {
      if (this.isStudent) {
        this.addPersonForm.honorList.push({
          value: ''
        });
      }else {
        this.addPersonForm.honorList.push({
          value: ''
        });
      }
    },

    // 点击变更标签页状态
    handleClick(tab, event) {
      // console.log(tab, event);
      if (tab.name === 'teacher') {
        this.isStudent = false
      } else {
        this.isStudent = true
      }
      // console.log(this.isStudent)
    },

    // 更改页码，进行导航
    async handleCurrentChange (val) {
      // console.log(val)
      this.currentPage = val
      this.getGoodPersonList(this.isStudent)
    },

    // 前端处理后端数据
    foreachObj (data) {
      data.map(item => {
        item.create_time = toDateString(item.create_time)
        item.update_time = toDateString(item.update_time)
      })

      return data
    },

    handleClose(done) {
      done()
    }
  }
}
</script>

<style lang="less" scoped>

</style>
